<template>
	<page-meta :page-style="$theme.pageStyle">
		<!-- #ifndef H5 -->
		<navigation-bar :front-color="$theme.navColor" :background-color="$theme.navBgColor" />
		<!-- #endif -->
	</page-meta>
	<view class="coupon-buy">
		<view class="coupon-card box-border bg-white flex items-center justify-between" v-for="(item, index) in formData" :key="index">
			<view class="flex items-center">
				<view class="coupon-icon flex items-center justify-center">
					<text class="font-medium text-4xl">￥{{ item.price }}</text>
					<text class="text-sm">/{{ item.num }}张</text>
				</view>
				<view class="ml-4">
					<view class="font-medium text-4xl mb-7">{{ item.title }}</view>
					<view>下单后{{ item.day }}天内可用</view>
				</view>
			</view>
			<view v-if="item.is_buy == 1" class="text-2xl mr-3 buys buys2">已购买</view>
			<view v-else class="text-2xl mr-3 buys" @click="buys(item.id)">购买</view>
		</view>

		<view v-if="formData.length == 0" class="flex items-center justify-center px-[20rpx] py-[32rpx]">暂无可买卡券</view>
	</view>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { getCoupon, yhjSub, prepay } from '@/api/user';
import { pay } from '@/utils/pay';

const formData = ref<any>([]);
const id = ref<any>('');

const getData = async () => {
	formData.value = await getCoupon();
};

const buys = async (id) => {
	const order = await yhjSub({ id });
	pays(order.from, order.order_id);
};

const pays = async (from, order_id) => {
	const ret = await prepay({
		from,
		order_id,
		pay_way: '2'
	});
	if (ret.config) {
		uni.showLoading();
		// #ifdef H5
			ret.config.timeStamp = ret.config.timeStamp.toString();
			const retstr = await pay.payment(2, ret.config);
			if (retstr == 'success') {
				uni.hideLoading();
				uni.$u.toast('支付成功');
				setTimeout(function () {
					uni.navigateBack();
				}, 1500);
			} else {
				uni.hideLoading();
				uni.$u.toast('支付失败');
				// setTimeout(function () {
				// 	uni.navigateBack();
				// }, 1500);
			}
		// #endif
		// #ifdef MP-WEIXIN
		uni.requestPayment({
			provider: 'wxpay',
			timeStamp: ret.config.timeStamp.toString(),
			nonceStr: ret.config.nonceStr,
			package: ret.config.package,
			signType: ret.config.signType,
			paySign: ret.config.paySign,
			success(res) {
				uni.hideLoading();
				uni.$u.toast('支付成功');
				setTimeout(function () {
					uni.reLaunch({
						url: '/pages/coupon_use/coupon_use'
					});
				}, 1500);
			},
			fail(e) {
				console.log(e);
				uni.hideLoading();
				uni.$u.toast('支付失败');
			}
		});
		// #endif
	}
};

onLoad((options: any) => {
	getData();
});
</script>

<style lang="scss">
.coupon-buy {
	height: 100%;

	.coupon-card {
		margin: 30rpx 20rpx;
		height: 200rpx;

		.coupon-icon {
			background: url('../../static/images/user/icon.png') no-repeat;
			background-size: 100% 100%;
			width: 200rpx;
			height: 200rpx;
			color: #fff;
		}

		.buys {
			background: #5274eb;
			border-radius: 35rpx;
			padding: 10rpx 35rpx;
			color: #fff;
		}
		.buys2 {
			background: #999;
		}
	}
}
</style>
